<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::head(~{})"></head>
<body class="layui-anim layui-anim-up">
	<div class="x-nav">
		<span class="layui-breadcrumb">
			<a href="#">首页</a>
			<a>
				<cite th:text="${title}"></cite>
			</a>
		</span>
	</div>
	<div class="x-body">
		<div class="layui-row">
			<form class="layui-form">
				<div class="layui-form-item">
		            <div class="layui-input-inline">
						<input type="text" id="hospitalname" name="hospitalname" placeholder="医院名称" autocomplete="off" class="layui-input">
					</div>
					<button type="reset" class="layui-btn">重置</button>
					<button class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
				</div>
			</form>
		</div>
		<table class="layui-hide" id="table" lay-filter="table"></table>
	</div>
</body>
<script type="text/html" id="toolbarOpt">
	<div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
	<div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>
</script>
<script type="text/html" id="lineOpt">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:inline="javascript">
	var getParams = function() {
		var data = {
            hospitalname : $('#hospitalname').val()
		}
		return data;
	}
	layui.use([ 'form', 'laydate', 'table' ], function() {
		var form = layui.form, laydate = layui.laydate //日期
		, table = layui.table //表格


		//执行一个table实例
		var currPage = 1;
		var tableList = table.render({
			elem : '#table',
			url : ctxPath + '/exam/hospital/paging', //数据接口
			where : getParams(),
			title : '',//定义 table 的大标题（在文件导出等地方会用到）
			page : true,//开启分页
			toolbar : '#toolbarOpt',//开启工具栏
			defaultToolbar : [ 'filter' ],
			limits : [ 10, 50, 100 ],//每页条数的选择项，
			even : true,//隔行背景
			text : {
				none : '暂无相关数据' //默认：无数据。
			},
			cols : [ [ //表头
			{type : 'checkbox', fixed : 'left'},
	        {field : 'hospitalname', title : '医院名称', width : 150},
			{fixed : 'right', title : '操作', width : 250, align : 'center', toolbar : '#lineOpt'} 
			] ],
			request : {
				pageName : 'pageNumber', //页码的参数名称，默认：page
				limitName : 'pageSize' //每页数据量的参数名，默认：limit
			},
			done : function(res, curr, count) {
				//获取删除后重载页码
				if (res.data.length == 1) {
					currPage = curr - 1;
				} else {
					currPage = curr;
				}
			}
		});
		//监听行数据事件
		table.on('tool(table)', function(obj) {
			//注：tool是工具条事件名，test是table原始容器的属性 lay-filter='对应的值'
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			var id = data.id;
			switch (layEvent) {
			case 'detail':
				admin_medium_window('查看', ctxPath + '/exam/hospital/detail?id=' + id);
				break;
			case 'del':
				admin_del_data(id, ctxPath + '/exam/hospital/delete', currPage);
				break;
			case 'edit':
				admin_medium_window('编辑', ctxPath + '/exam/hospital/toEdit?id=' + id);
				break;
			}
		});
		//监听头部工具栏事件
		table.on('toolbar(table)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			switch (obj.event) {
			case 'add':
				admin_medium_window('新增', ctxPath + '/exam/hospital/toAdd');
				break;
			case 'delete':
				var data = checkStatus.data;
				var ids = new Array()
				$.each(data, function(index, item) {
					ids[index] = item.id;
				});
				admin_del_data(ids, ctxPath + '/exam/hospital/delete', currPage);
				break;
			}
		});
		//监听提交
		form.on('submit(search)', function(data) {
			table.reload('table', {
				page : {curr : currPage},
				where : getParams()
			//设定异步数据接口的额外参数
			});
			return false;
		});
	});
</script>
</html>